<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<title>Query Selector Demo</title>
	<style>
		td{
			border-style:solid;
			border-width:1px;
			font-size:300%;
		}
		td:hover{
			background-color:yellow;
		}
		#hoverResult{
			color:green;
			font-size:200%;
		}
	</style>
</head>
<body>
	<section>
	<!-- create a table with a 3 by 3 cell dispaly-->
		<table>
			<tr>
				<td>1-1</td><td>1-2</td><td>1-3</td>
			</tr>
			<tr>
				<td>2-1</td><td>2-2</td><td>2-3</td>
			</tr>
			<tr>
				<td>3-1</td><td>3-2</td><td>3-3</td>
			</tr>
		</table>
		<div>Focus the buton, hover over the table cells,and hit Enter to identify them using querySelector('td:hover').</div>
		<button type="button" id="findHover" >Find 'td:hover' target</button>
		<div id="hoverResult"></div>
		<script type="text/javascript">
		document.getElementById("findHover").onclick=function(){
		var hoverd=document.querySelector("td:hover");
		if(hoverd)
			document.getElementById("hoverResult").innerHTML=hoverd.innerHTML;
		}
		</script>
	</section>
</body>
</html>
